<template>
  <div class="layout-pd">
   
    <zh-table ref="queryTable" size="mini" :data="formData.tableData" funcCode="dict0001"
              :columns="formData.tableColumns" highlight-current-row>
      <template #query>
        <zh-form ref="queryFormRef" :modal="formData.queryForm" label-width="60px" :span="6">
          <zh-form-input prop="dictValue" placeholder="请输入名称" label="名称" v-model="formData.queryForm.dictValue"></zh-form-input>
          <zh-form-select prop="status" placeholder="请选择状态" label="状态" v-model="formData.queryForm.status" :options="formData.statusDict"></zh-form-select>
          
          <zh-form-query-button  @queryClick="query" :span="12">
            <zh-button @click="openAddModal()" buttonType="add">添加</zh-button>
          </zh-form-query-button>
        </zh-form>
      </template>
      <template #title_default="{ row }">
        <zh-tag-dict :dictList="formData.dictData[formData.dictField]" v-model="row.dictKey"></zh-tag-dict>
      </template>
      <template #operate="{ row }">
        <zh-button  plain @click="showdetail(row,'edit')" size="small" color="#E6A23C" v-func:dict0005>修改</zh-button>
      </template>
     <template #sectionStatus_default="{ row }">
      <el-switch
          v-model="row.status"
          :loading="statusLoading"
          active-text="正常"
          inactive-text="无效"
          active-value="1"
          inactive-value="0"
          inline-prompt
          size="large"
          @change="onStatusChange(row)"
          :width="60"
      ></el-switch>
    </template>
    </zh-table>
    <zh-dialog style="width: 40%" :title="formData.title"
               v-model="formData.detailVisible"
               @cancel = "closeDialog()"
               @confirm = "upSysDict()">
      <div>
        <zh-form v-model="formData.selectRow" ref="dialogFormRef" :disabled="formData.selectRow.status==='1'?false:true" :rules="formData.rules" label-width="80px">
          <zh-form-input
              prop="dictKey"
              :span="24"
              label="编码"
              v-model="formData.selectRow.dictKey"
              :disabled = "true"
          ></zh-form-input>
          <zh-form-input
              prop="dictValue"
              :span="24"
              label="名称"
              v-model="formData.selectRow.dictValue"
          ></zh-form-input>
          <zh-form-number
              prop="orderNo"
              :span="24"
              label="排序号"
              v-model="formData.selectRow.orderNo"
          ></zh-form-number>
          <zh-form-input
              prop="classify"
              :span="24"
              label="分类"
              v-model="formData.selectRow.classify"
          ></zh-form-input>
          <zh-form-color-picker :span="24" prop="icon" label="颜色" placeholder="请选择" v-model="formData.selectRow.icon"></zh-form-color-picker>
        </zh-form>
      </div>
    </zh-dialog>

    <zh-dialog style="width: 40%" :title="formData.title"
               v-model="formData.showNewModal" @cancel = "closeDialog()">
      <div>
        <zh-form v-model="formData.selectRow" ref="dialogFormRef" :span="24" label-width="80px"
                 :rules="formData.rules">
          <zh-form-input
              prop="dictKey"
              :span="24"
              label="本地编码"
              v-model="formData.selectRow.dictKey"
          ></zh-form-input>
          <zh-form-input prop="dictValue" :span="24" label="名称" v-model="formData.selectRow.dictValue"></zh-form-input>
          <zh-form-number
              prop="orderNo"
              :span="24"
              label="排序号"
              v-model="formData.selectRow.orderNo"
          ></zh-form-number>
          <zh-form-input
              prop="classify"
              :span="24"
              label="分类"
              v-model="formData.selectRow.classify"
          ></zh-form-input>
          <zh-form-color-picker :span="24" prop="icon" label="颜色" placeholder="请选择" v-model="formData.selectRow.icon"></zh-form-color-picker>
        </zh-form>
      </div>
      <template #footer>
				<span class="dialog-footer">
					<zh-button @click="addSysDict()" v-func:dict0004 :loading="formData.saveLoading" >保存</zh-button>
				</span>
      </template>
    </zh-dialog>

  </div>
</template>

<script lang="ts" setup name="commonSysParams">
import { ElMessageBox, ElMessage } from 'element-plus';
import ZhFormInput from "@/components/zh-form-input/index.vue";

const formData = reactive({
  saveLoading:false,
  advanced:false,
  dictData: {} as any,
  detailVisible:false,
  showNewModal:false,
  selectRow:{
    sysId:'',
    status:'',
    fixed:'',
    dictKey:'',
    orderNo:0,
    dictField:'',
    fieldName:'',
    dictValue:'',
  } as any,
  title:'',
  rules:{
    dictKey: [
      {
        required: true,
        message: '请输入本地编码',
        trigger: 'blur',
      },
    ],
    dictValue: [
      {
        required: true,
        message: '请输入名称',
        trigger: 'blur',
      },
    ],
  },
  tableData:[],
  statusDict:[{dictKey:'1',dictValue:'正常'},{dictKey:'0',dictValue:'无效'}],
  queryForm:{dictValue:'',dictField:'',status:'1'},
  tableColumns:[
    {
      type: 'seq',
      width: 80,
      fixed: 'left',
      align: 'center',
      title: '序号',
    },
    {
      field: 'dictKey',
      title: '本地编码',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'dictValue',
      title: '名称',
      visible: true,
      align: 'center',
      minWidth: 300,
      slots: {
        // 使用插槽模板渲染
        default: 'title_default',
      },
    },
    {
      field: 'orderNo',
      title: '排序号',
      visible: true,
      align: 'center',
      minWidth: 100,
    },
    {
      field: 'classify',
      title: '分类',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'status',
      title: '有效标志',
      visible: true,
      align: 'center',
      minWidth: 150,
      slots: {
        // 使用插槽模板渲染
        default: 'sectionStatus_default',
      },
    },
    {
      field: 'operate',
      title: '操作',
      fixed: 'right',
      align: 'center',
      width: 120,
      slots: {
        // 使用插槽模板渲染
        default: 'operate',
      },
    },
  ],
  nextNum:0,
  dictField:'',
  fieldName:'',
  dilogDis:false,
});

const queryFormRef = ref();
const queryTable = ref();
const statusLoading = ref(false)


let meta = useRouter().currentRoute.value.meta;
if (meta && meta.query) {
  const query: any = meta.query;
  formData.dictField = query.dictField;
  formData.queryForm.dictField = query.dictField;
  formData.fieldName = query.fieldName;
}

const getDict = () => {
  const params = {} as any;
  params.dictFields = formData.dictField;
  $api.common.getBatchDict.post(params).then((res) => {
    formData.dictData = res.result;
  });
};
// 初始化
onMounted(() => {
  getDict();
  query();
});
const query = () => {
  queryTable.value.refresh(formData.queryForm);

};

const upSysDict = () => {
  // console.log("upSchoolYear")
  //dict0005
  let params = Object.assign({},formData.selectRow) ;
  $api.common.send.post('dict0005', params).then(res => {
    console.log("res:",res)
    if(res.code == 0){
      ElMessageBox.alert('修改成功');
      closeDialog();
      getDict();
      query();
    }
  })
}
const addSysDict = () => {
  formData.saveLoading=true
  let params = Object.assign({},formData.selectRow) ;
  params.status = '1';
  params.fixed = '1';
  params.dictField = formData.dictField;
  params.fieldName = formData.fieldName;

  params.dictValue = formData.selectRow.dictValue;

  $api.common.send.post('dict0004', params).then(res => {
    formData.saveLoading=false
    if(res.code === 0){
      ElMessageBox.alert('添加成功');

      closeDialog();
      getDict();
      query();
    }
  }).catch(() =>{
    formData.saveLoading=false
  })
}
//dict0024
const closeDialog = () => {
  formData.selectRow = {};
  formData.detailVisible = false;
  formData.showNewModal = false;
  formData.title = '';
}
const showdetail = (row,type) => {
  if(type==='edit'){
    Object.assign(formData.selectRow,row) ;
    formData.title = "编辑";
    formData.detailVisible = true;
  }
  if(type==='void'){
    let params = Object.assign({},row) ;
    params.status = '0';
    $api.common.send.post('dict0005', params).then(res => {
      console.log("res:",res)
      if(res.code == 0){
        ElMessageBox.alert('作废成功');
        closeDialog();
        query();
      }
    })
  }
  if(type==='enable'){
    let params = Object.assign({},row) ;
    params.status = '1';
    $api.common.send.post('dict0005', params).then(res => {
      console.log("res:",res)
      if(res.code == 0){
        ElMessageBox.alert('启用成功');
        closeDialog();
        query();
      }
    })
  }
}
const openAddModal = () => {
  formData.title = "新增";
  formData.showNewModal = true;
}

// 更新状态
const onStatusChange = (data) => {
  statusLoading.value = true
  $api.common.send.post('dict0005', data).then((res: any) => {
    if (res.code === 0) {
      // 保存成功
      ElMessage.success('更新成功')
      query()
    }
    statusLoading.value = false
  }).catch(() => {
    statusLoading.value = false
    query()
  })
  statusLoading.value = false
}
</script>

<style scoped>

</style>
